<template>
	<view class="travelList" >
		<view class="travelItem" v-for="(item, index) in list" :key="index" @click.prevent="navtoTravelDetails(item.post_id)">
			<view class="header flex flexBei">
				<text class="time">{{item.create_time.slice(0, 16)}} </text>
				<view class="edit">
					<view class="iconfont icon-shanchu inview" @click="showModel(item.post_id)"></view>
				</view>
			</view>
			<view class="content flex flexBei">
				<image :src="item.picture" ></image>
				<view class="details textHd4">
					{{item.post_content}}
				</view>
			</view>
			<view class="bottom flex">
				<view class="icon">
					{{item.category}}
				</view>
				<view class="icon">
					<view class="iconfont icon-zan inview"></view>
					<text>{{item.likes > 999? '999+' : item.likes}}</text>
			   </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mytravel",
		props: {
			list: {
				required: true,
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
/* 游记内容 */
.travelList {
	width: 710rpx;
	margin: 0 auto;
.travelItem {
	padding: 18rpx 12rpx ;
	margin-top: 40rpx;
	background-color: #fff;
	border-radius: 12rpx;
	.header {
		height: 56rpx;
		line-height: 56rpx;
		color: #999;
		font-size: 24rpx;
		.iconfont {
		   color: #82848a;
		   font-size: 36rpx;
		   padding-right: 24rpx;
		}
	}
	/* 内容主体 */
	.content {
		padding: 12rpx;
		font-size: 26rpx;
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 12rpx;
		}
		.details {
			width: 500rpx;
			text-indent: 2em;
		}
	}
	/* 底部 */
	.bottom {
		margin-top: 12rpx;
		justify-content: flex-end;
		.icon {
			margin-right: 18rpx;
			color: #909399;
		}
	}
}
}
</style>
